<template>
  <v-layout title="公众号详情">
    <el-row type="flex" justify="center">
      <el-col :lg="14" :md="18" :sm="24" class="confirm">

        <v-form
          ref="form1"
          :form-title="formTitle"
          :form-data="formData"
          label-width="120px"
        />
        <!--汇款银行信息-->

        <v-resetConfirmBtn
          @reset="reset"
          @confirm="confirm"
        />
      </el-col>
    </el-row>
  </v-layout>

</template>

<script>
  import {deepClone} from '@/utils'

  export default {
    data() {
      return {
        id: '',
        title: '',
        formData: {},

      }
    },
    computed: {
      formTitle() {
        return ([
          {
            cn: 'id',
            en: 'id',
            notShow: !this.id,
            disabled: true
          },
          {
            cn: '公众号名称',
            en: 'mp_name',
            disabled: !!this.id
          },
          {
            cn: '主体',
            en: 'owner_corp',
            disabled: !!this.id
          },
          {
            cn: '投放完粉丝数',
            en: 'fixed_fans_count',
          },
          {
            cn: '固定单粉成本',
            en: 'fixed_fan_cost',
            disabled: true
          },
          {
            cn: '投入成本',
            en: 'total_cost',
            notShow: !this.id,
            disabled: true
          },
          {
            cn: '预估收益',
            en: 'income',
            notShow: !this.id,
            disabled: true
          },
          {
            cn: '实际收益',
            en: 'act_income',
            notShow: !this.id,
            disabled: true
          },
          {
            cn: '成本回收比例',
            en: 'recovery_rate',
            notShow: !this.id,
            disabled: true
          },
          {
            cn: '7日日均回收',
            en: 'daily_income',
            notShow: !this.id,
            disabled: true
          },
          {
            cn: '总体回本周期',
            en: 'payback_period',
            notShow: !this.id,
            disabled: true
          },
          {
            cn: '剩余回本周期',
            en: 'remaining_time',
            notShow: !this.id,
            disabled: true
          },
          {
            cn: '负责人',
            en: 'operater',
            disabled: !!this.id,
          },
          {
            cn: '系统',
            en: 'use_system',
            disabled: !!this.id,
          },
          {
            cn: '投放渠道',
            en: 'launch_channel',
            disabled: !!this.id
          },
          {
            cn: '粉丝数',
            en: 'total_fans',
            notShow: !this.id,
            disabled: true
          },
          {
            cn: '投放公司',
            en: 'launch_corp',
            disabled: !!this.id
          },
          {
            cn: '投放状态',
            en: 'launch_state',
            type: 'select',
            list: [
              {
                label: '投放成功',
                value: '1'
              },
              {
                label: '投放失败',
                value: '0'
              },
            ],
            disabled: !!this.id
          },
          {
            cn: '开始投放时间',
            en: 'start_date',
            type: 'time',
            disabled: !!this.id
          },
          {
            cn: '单粉成本',
            en: 'per_fan_cost',
            notShow: !this.id,
            disabled: true
          },
          {
            cn: '单粉收益',
            en: 'per_fan_income',
            notShow: !this.id,
            disabled: true
          },
          {
            cn: '实际单粉成本',
            en: 'real_fan_cost',
            notShow: !this.id,
          },
          {
            cn: '备注',
            en: 'note',
            type: 'textarea'
          },
        ])
      }
    },
    activated() {
      this.id = this.$route.query.id
      this.name = this.$route.query.name
      if (this.id) {
        this.getClientDetail()
      } else {
        this.formData = {}
      }
    },
    methods: {

      getClientDetail() {
        const data = {
          id: this.id,
        }
        this.$get('action/TaoMpInfo/qryOp', data)
          .then(res => {
            let data = res.data.MpDetailInfo || {}
            data.recovery_rate = (data.recovery_rate ? (data.recovery_rate * 100).toFixed(2) : 0) + '%';
            data.per_fan_cost = data.per_fan_cost && (data.per_fan_cost).toFixed(4) || 0
            data.per_fan_income = data.per_fan_income && (data.per_fan_income).toFixed(4) || 0
            data.fixed_fan_cost = data.fixed_fan_cost && (data.fixed_fan_cost).toFixed(4) || 0
            this.formData = data

          })
      },
      reset() {
        this.id ? this.getClientDetail() : this.formData = {}
      },
      confirm() {
        const data = {
          ...this.formData
        }

        if (!this.formData.mp_name) {
          return (
            this.$message({
              message: '请填写公众号名称',
              type: 'error'
            })
          )
        }
        this.$post('action/TaoMpInfo/save', data)
          .then(res => {
            this.back()
            this.$message({
              message: res.msg,
              type: 'success'
            })
          })
      },
      back() {
        this.$router.go(-1)
      },
    }
  }

</script>

<style scoped>
  span + button {
    margin-left: 15px;
  }

  .el-button + .el-button {
    margin-left: 15px

  }

  .flex {
    display: flex;
    flex-wrap: nowrap;
  }

  .label {
    width: 120px;
    padding-right: 12px;
    font-size: 14px;
    text-align: right;
    color: #606266;
    line-height: 30px;
  }

  .m0 {
    margin: 0;
  }
</style>


